<template>
  <div>
    <div>
      <el-container>
        <el-header>
          <div style="text-align: right">
            <router-link to="/login">登陆</router-link>
            <el-divider direction="vertical"/>
            <router-link to="/register">注册</router-link>
          </div>
          <h2 style="text-align: center">Lovo商城供应商系统</h2>
        </el-header>
        <el-main>
          <div style="display: flex;justify-content: center;margin-top: 30px;">
            <el-form
                label-position="left"
                ref="registerForm"
                :model="formData"
                :rules="rules"
                label-width="100px"
                class="demo-ruleForm"
                size="default"
                style="width: 800px"
                status-icon
            >
              <el-row>
                <el-col :span="12">
                  <el-form-item label="用户名" prop="userName">
                    <el-input v-model="formData.userName"/>
                  </el-form-item>
                  <el-form-item label="供应商名称" prop="supplierName">
                    <el-input v-model="formData.supplierName"/>
                  </el-form-item>
                  <el-form-item label="公司地址" prop="address">
                    <el-input v-model="formData.address"/>
                  </el-form-item>
                  <el-form-item label="密码" prop="password">
                    <el-input v-model="formData.password"/>
                  </el-form-item>



                </el-col>
                <el-col :span="12">
                  <el-form-item label="公司邮箱" prop="email">
                    <el-input v-model="formData.email"/>
                  </el-form-item>
                  <el-form-item label="负责人姓名" prop="principalName">
                    <el-input v-model="formData.principalName"/>
                  </el-form-item>

                  <el-form-item label="公司电话" prop="phone">
                    <el-input v-model="formData.phone"/>
                  </el-form-item>

                  <el-form-item label="确认密码" prop="pwdAgain">
                    <el-input v-model="formData.pwdAgain"/>
                  </el-form-item>

                </el-col>

              </el-row>

              <el-form-item label="经营范围" prop="scope">
                <el-input v-model="formData.scope" type="textarea"/>
              </el-form-item>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="身份证图片" prop="identity">
                    <!--不使用action 符号#   用http-request实现自定义上传  :http-request="httpRequest"  :on-change="handleChange"-->
                    <el-upload
                        class="avatar-uploader"
                        action="lei"
                        :on-change="handleChange"
                        :show-file-list="false"
                        :http-request="httpRequest"><!--覆盖默认上传-->
                      <img v-if="imageUrl" :src="imageUrl" class="avatar">
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>

                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="资质图片" prop="image">


                    <!--不使用action 符号#   用http-request实现自定义上传  :http-request="httpRequest"  :on-change="handleChange"-->
                    <el-upload
                        class="avatar-uploader"
                        action="lei"
                        :on-change="handleChange"
                        :show-file-list="false"
                        :http-request="httpRequest"><!--覆盖默认上传-->
                      <img v-if="imageUrl" :src="imageUrl" class="avatar">
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>



                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item>
                <el-button type="primary" @click="register('registerForm')">
                  注册
                </el-button>
                <el-button @click="resetForm('registerForm')">
                  重置
                </el-button>
              </el-form-item>
            </el-form>

          </div>
        </el-main>
      </el-container>
    </div>
  </div>
</template>

<script>
import  UploadFile from 'element-plus'

export default {
  data() {
    return {
      formData: {},
      rules: {
        userName: [
          {
            required: true,
            pattern: '^[0-9a-zA-Z_]{6,20}$',
            message: '用户名长度6-20位，由数字，字母，下划线组成', trigger: 'blur'
          },
        ],
        password: [
          {
            required: true,
            pattern: '^[0-9a-zA-Z_]{6,20}$',
            message: '密码长度6-20位，由数字，字母，下划线组成', trigger: 'blur'
          },
        ],
        supplierName: [
          {
            required: true,
            message: '请正确输入供应商名称', trigger: 'blur'
          }
        ],
        email: [
          {
            required: true,
            type: 'email',
            message: '请正确输入邮箱',
            trigger: ['blur'],
          },
        ],
        address: [
          {
            required: true,
            message: '请正确输入地址', trigger: 'blur'
          }
        ],
        phone: [
          {
            required: true,
            pattern: /^1[3-9][0-9]{9}$/,
            message: '手机号需为1[3-9]开始的11位数字', trigger: 'blur'
          },
        ],
        principalName: [
          {
            required: true,
            message: '请正确输入负责人姓名', trigger: 'blur'
          }
        ],
        scope: [
          {
            required: true,
            message: '请填写经营范围', trigger: 'blur'
          }
        ],
        pwdAgain: [
          {
            required: true,
            message: '请再次确认密码', trigger: 'blur'
          }
        ],
        image: [
          {
            required: true,
            message: '必须上传资质图片', trigger: 'blur'
          }
        ],
        identity: [
          {
            required: true,
            message: '必须上传身份证图片', trigger: 'blur'
          }
        ],

      },
      imageUrl: '',
      tempUrl: '',

    }
  },
  methods: {
    register(formName) {

    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //将上传图片的原路径赋值给临时路径
    handleChange(file, fileList) {
      this.tempUrl = URL.createObjectURL(file.raw);
      this.imageUrl=this.tempUrl
    },
//实现图片上传功能
    httpRequest(item) {
      //验证图片格式大小信息
      const isJPG = item.file.type == 'image/jpeg' || item.file.type == 'image/png';
      const isLt2M = item.file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG 或 PNG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!');
      }
      //图片格式大小信息没问题 执行上传图片的方法
      if (isJPG && isLt2M == true) {
        // post上传图片
        let App = this;
        //定义FormData对象 存储文件
        let mf = new FormData();
        //将图片文件放入mf
        mf.append('file', item.file);
        App.$Api.fileUpload(mf, function (result) {
          if (result.result == "true") {
            App.$notify.success({
              title: '温馨提示：',
              message: result.message,
            });
            //将临时文件路径赋值给显示图片路径（前端显示的图片）
            App.imageUrl = App.tempUrl;
            //将后台传来的数据库图片路径赋值给car对象的图片路径
            App.car.carImg = result.imgUrl;
          } else {
            App.$notify.error({
              title: '温馨提示：',
              message: result.message,
            });
          }
        })
      }
    }


  }
}
</script>

<style scoped>
.el-form-item {
  margin-left: 20px;
}


.el-button {
  margin-left: 50px;
}


.avatar-uploader {
  margin-top: 20px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 178px;
  height: 178px;
}

.avatar-uploader:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: flex;
}
</style>